<template>
  <div class="form">
    <my-form :formAttr="formAttr" :compArr="compArr" :form="form"></my-form>
  </div>
</template>

<script>
import MyForm from "@/views/components/myForm";
export default {
  name: "Form",
  components: { MyForm },
  data() {
    return {
      // 传递给el-form用，通过v-bind
      formAttr: {
        inline: true,
        labelWidth: "80px",
        class: "demo-form-inline"
      },
      form: {},
      // 通过数据去确定渲染哪些表单
      compArr: [
        {
          id: 1,
          name: '年龄',
          type: 'MyInput',
          attr: {
            prop: 'age',
            placeholder: '请输入',
          },
        },
        {
          id: 2,
          name: '日期选择框',
          type: 'MyDataPicker',
          attr: {
            prop: 'data',
            vModel: "dataVal",
            type: "date",
            placeholder: "选择日期",
          },
        },
        {
          id: 3,
          name: '下拉框',
          type: 'MySelect',
          attr: {
            prop: 'food',
            placeholder: '请选择',
          },
          optionArr: [
            {
              value: 'wang',
              label: '旺旺'
            }, {
              value: 'nai',
              label: '双皮奶'
            }
          ],
        },
      ],
    }
  }
};
</script>
<style scoped lang="scss"></style>